<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson5/05.html -->
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>跟随鼠标移动（大图展示）</title>
		<style type="text/css">
			html,
			body {
				overflow: hidden;
			}
			
			body,
			div,
			ul,
			li {
				margin: 0;
				padding: 0;
			}
			
			#box ul {
				width: 768px;
				height: 172px;
				list-style-type: none;
				margin: 10px auto;
			}
			
			#box li {
				float: left;
				width: 170px;
				height: 170px;
				cursor: pointer;
				display: inline;
				border: 1px solid #ddd;
				margin: 0 10px;
			}
			
			#box li.active {
				border: 1px solid #a10000;
			}
			
			#box li img {
				width: 170px;
				height: 170px;
				vertical-align: top;
			}
			
			#big {
				position: absolute;
				width: 400px;
				height: 400px;
				border: 2px solid #ddd;
				display: none;
			}
			
			#big div {
				position: absolute;
				top: 0;
				left: 0;
				width: 400px;
				height: 400px;
				opacity: 0.5;
				filter: alpha(opacity=50);
				background: #fff url(img/loading.gif) 50% 50% no-repeat;
			}
		</style>
		<script type="text/javascript">
			onload = function(){
				var box = document.getElementById("box");
				var liArr = box.children[0].children;
				var bigBox = document.getElementById("big");
				for (var i in liArr) {
					liArr[i].onmouseenter = function(){
						bigBox.innerHTML = "";
						var oImg = document.createElement("img");
						oImg.src = this.children[0].src.replace(".jpg","_big.jpg");
						bigBox.appendChild(oImg);
						bigBox.style.display = "block";
						
						document.onmousemove = function(e){
							var e = e || event;
							if(e.clientX > (window.innerWidth - bigBox.offsetLeft - 10)){
								bigBox.style.left = e.clientX - 10 - bigBox.offsetWidth + "px";
							}else{								
								bigBox.style.left = e.clientX + 10 + "px";
							}
							bigBox.style.top = e.clientY + 10 + "px";
						}
					}
					
					liArr[i].onmouseleave = function(){
						document.onmousemove = "";
						bigBox.style.display = "none";
					}
				}
				
			}
		</script>
	</head>

	<body>
		<div id="box">
			<ul>
				<li class=""><img src="shirt_1.jpg"></li>
				<li class=""><img src="shirt_2.jpg"></li>
				<li class=""><img src="shirt_3.jpg"></li>
				<li class=""><img src="shirt_4.jpg"></li>
			</ul>
		</div>
		<div id="big" style="display: none; top: 190px; left: 812px;">

		</div>

	</body>

</html>